﻿<style>
	/* 左侧菜单栏 */
	.left-menu {
		width: 100%;
		background-color: #edeef9;
		height: 100%;
	}

	.left-menu>.menu-items {
		width: 100%;
	}

	.menu-items>li {
		width: 100%;
		height: 70px;
		font-size: 16px;
		color: #333;
		line-height: 70px;
		text-align: left;
		position: relative;
		cursor: pointer;
		z-index: 100;
		padding-left: 50px;
		box-sizing: border-box;
	}

	.menu-items>li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		transition: .5s;
		background-color: #DCE6FA;
		transform-origin: left;
		transform: scaleX(0);
		z-index: -1;
	}

	.menu-items>li::after {
		content: '';
		position: absolute;
		height: 100%;
		width: 5px;
		background-color: #469EFF;
		top: 0;
		right: 0;
		border-radius: 5px;
		transition: .5s;
		transform-origin: top;
		transform: scaleY(0);
		z-index: -1;
	}

	.menu-items>li:first-child i {
		background-position-y: -10px;
	}

	.menu-items>li:nth-child(2) i {
		background-position-y: -62px;
	}

	.menu-items>li:nth-child(3) i {
		background-position-y: -114px;
	}

	.menu-items>li:last-child i {
		background-position-y: -166px;
	}

	.menu-items>li:hover::before {
		transform: scaleX(1);
	}

	.menu-items>li:hover::after {
		transform: scaleY(1);
	}

	.menu-item-current {
		background-color: #DCE6FA;
	}

	/* 在此处遇到疑问 */
	.menu-items>.menu-item-current::after {
		transform: scaleY(1);
	}
</style>


<div class="left-menu">
	<ul class="menu-items">
		<li onClick="location.href='./index.html'">测试执行管理</li>
		<li onClick="location.href='./jiashicang.html'">驾驶舱</li>
		<li onClick="location.href='#'">看板</li>
		<li onClick="location.href='./rizhoubao.html'">日周报</li>
		<li onClick="location.href='#'">环境工单</li>
		<li onClick="location.href='#'">案例库</li>
		<li onClick="location.href='#'">知识库</li>
		<li onClick="location.href='#'">人员管理</li>
		<li onClick="location.href='#'">权限管理</li>
		<li onClick="location.href='#'">自动化工具</li>
	</ul>
</div>